<template>
    <fragment>
        <template v-for="item in routerList">
            <el-submenu v-if="item.children && item.children.length > 0"
                        :key="item.name"
                        :index="item.name"
            >

                <template slot="title">
                    <i :class="item.meta.icon"></i>
                    <span slot="title"> {{item.meta.name}} </span>
                </template>
                <!--递归组件，把遍历的值传回子组件，完成递归调用-->
                <dynamic-menu :router-list="item.children"></dynamic-menu>
            </el-submenu>
            <!--只有一级菜单-->
            <el-menu-item v-else
                          :index="item.name"
                          :route="item.name"
                          @click="gotoRoute(item.name,item.meta.name)"
            >
                <!--图标-->
                <i :class="item.meta.icon"></i>
                <!--标题-->
                <span slot="title"> {{item.meta.name}} </span>
            </el-menu-item>
        </template>
    </fragment>
</template>

<script>
    import {mapActions} from "vuex";

    export default {
        name: 'DynamicMenu',
        props: {
            routerList: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {
            ...mapActions("menu", ["addTag"]),
            gotoRoute(name, title) {
                this.addTag({name, title});
                this.$router.push({name});// push(path)  push({name:''})
            }
        }
    }
</script>

<style>
    .el-menu--collapse .el-submenu__title span {
        display: none;
    }
    .el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
        display: none;
    }
</style>

<style scoped>
    i {
        width: 14%;
        text-align: center;
    }

    span {
        width: 86%;
        text-align: center;
    }
</style>